<template>
  <div class="contract-word">
    <!-- 合同标题 -->
    <div class="contract-header">
      <h1 class="contract-title">{{ baseInfo.ContractName || '销售合同' }}</h1>
      <div class="contract-number">合同编号：<span class="key-info">{{ baseInfo.ContractNum }}</span></div>
    </div>

    <!-- 甲乙方信息 -->
    <div class="contract-parties">
      <div class="party">
        <div class="party-title">客户信息：</div>
        <div class="party-content key-info">{{ baseInfo.CustName }}</div>
        <div class="party-info">
          <div>地址：{{ baseInfo.CustAdd }}</div>
          <div>电话：<span class="key-info">{{ baseInfo.CustPhone }}</span></div>
          <div>开户行：{{ baseInfo.BankCode }}</div>
          <div>账号：<span class="key-info">{{ baseInfo.BankAccount }}</span></div>
          <div>税号：<span class="key-info">{{ baseInfo.Tax }}</span></div>
        </div>
      </div>
      <div class="party">
        <div class="party-title">基本信息：</div>
        <div class="party-info">
        <div>工作号：<span class="key-info">{{ baseInfo.JobNum }}</span></div>
          <div>合同类别：<span class="key-info">{{ baseInfo.Type === '1' ? '虚拟合同' : '正式合同' }}</span></div>
          <div>项目名称：{{ baseInfo.ProjectName }}</div>
          <div>签订地点：{{ baseInfo.SigningLocation }}</div>
          <div>签订日期：<span class="key-info">{{ baseInfo.Ddate }}</span></div>
          <div>单据日期：{{ baseInfo.DDate2 }}</div>
          <div>售前号：{{ baseInfo.SaleNum }}</div>
          <div>评审类型：{{ baseInfo.PSType }}</div>
          <div>是否合规：<span class="key-info">{{ baseInfo.IsCompliance === true ? '是' : '否' }}</span></div>
          <div>合同是否标准：{{ baseInfo.IsMoudel === true ? '是' : '否' }}</div>
          <div>是否补录：{{ baseInfo.IsBL}}</div>
        </div>
      </div>

      <div class="party">
        <div class="party-title">交付信息：</div>
        <div class="party-info">
          <div>交付时间：<span class="key-info">{{ baseInfo.DeliveryDate }}</span></div>
          <div>交付地点：<span class="key-info">{{ baseInfo.DeliveryLocation }}</span></div>
          <div>卸货方式：{{ baseInfo.Unload === '1' ? '乙方卸货' : '甲方卸货' }}</div>
          <div>包装要求：{{ baseInfo.PackRequirement === '0' ? '普通包装' : baseInfo.PackRequirement === '1' ? '木箱包装' : baseInfo.PackRequirement === '2' ? '出口包装' : baseInfo.PackRequirement === '3' ? '特殊包装' : '其他' }}</div>
          <div>税率：<span class="key-info">{{ baseInfo.Rate }}%</span></div>
          <div>附件资料：{{ baseInfo.PhasedFile }}</div>
          <div>补充说明：{{ baseInfo.UnloadConvention }}</div>
          <div v-if="baseInfo.Change">变更原因：{{ baseInfo.Change }}</div>
        </div>
      </div>
    </div>

    <!-- 合同标的 -->
    <div class="contract-subject">
      <h3>一、合同标的</h3>
      <el-table :data="subList" border style="width: 100%" max-height="500px">
        <el-table-column prop="index" label="序号" width="60" fixed="left">
          <template #default="scope">
            <span>{{ scope.$index+1 }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="CinvCode" label="设备编码" width="120" fixed="left"/>
        <el-table-column prop="CinvName" label="设备名称" width="200" fixed="left"/>
        <el-table-column prop="CustCinvCode" label="客户产品编码" width="120"/>
        <el-table-column prop="CustCinvName" label="客户产品名称" width="200"/>
        <el-table-column prop="CustCinvAdd" label="客户规格型号" width="200" show-overflow-tooltip/>
        <el-table-column prop="Quantity" label="数量" width="80"/>
        <el-table-column prop="YQuantity" label="原数量" width="80"/>
        <el-table-column prop="Price" label="单价" width="100"/>
        <el-table-column prop="YPrice" label="原单价" width="100"/>
        <el-table-column prop="JFDate" label="交付时间" width="120">
          <template #default="scope">
            {{ parseTime(scope.row.JFDate, '{y}-{m}-{d}') }}
          </template>
        </el-table-column>
        <el-table-column prop="YJFDate" label="原交付时间" width="120">
          <template #default="scope">
            {{ parseTime(scope.row.YJFDate, '{y}-{m}-{d}') }}
          </template>
        </el-table-column>
        <el-table-column prop="changecontent" label="变更内容" width="250" show-overflow-tooltip/>


        <el-table-column prop="Rate" label="税率" width="90">
          <template #default="scope">
            {{ scope.row.Rate }}%
          </template>
        </el-table-column>
        <el-table-column prop="Unit" label="单位" width="100"/>
        <el-table-column prop="TDYSJDFile" label="通电验收文件" width="100">
          <template #header>
            <span :style="{color: hasCheck('通电') ? 'red' : 'inherit'}">通电验收文件</span>
          </template>
          <template #default="scope">
            <el-popover :width="600">
              <template #reference>
                <el-link type="primary">
                  {{(scope.row.TDYSJDFile?.length && getFileStatus(scope.row.TDYSJDFile) !== 'N') ? '查看文件【'+ scope.row.TDYSJDFile?.length +'】': '未上传'}}
                </el-link>
              </template>
              <template #default>
                <div
                    class="demo-rich-conent"
                    style="display: flex; gap: 16px; flex-direction: column"
                >
                  <transition-group class="upload-file-list el-upload-list el-upload-list--text" name="el-fade-in-linear" tag="ul">
                    <li :key="index" class="el-upload-list__item ele-upload-list__item-content" v-for="(file, index) in scope.row.TDYSJDFile">
                      <el-link :href="`${file.FileAdd}`" :underline="false" target="_blank">
                        <span class="el-icon-document"> {{ file.FileName + '【' + (file.FileAdd ? '已上传' : '未上传') + '】'}} </span>
                        <span style="margin-left: 8px;color: red">{{parseTime(file.CreateDate)}}</span>
                      </el-link>
                    </li>
                  </transition-group>
                </div>
              </template>
            </el-popover>
          </template>
        </el-table-column>

        <el-table-column prop="JHYSJDFile" label="交货验收文件" width="100">
          <template #header>
            <span :style="{color: hasCheck('交货') ? 'red' : 'inherit'}">交货验收文件</span>
          </template>
          <template #default="scope">
            <el-popover :width="600">
              <template #reference>
                <el-link type="primary">
                  {{(scope.row.JHYSJDFile?.length && getFileStatus(scope.row.JHYSJDFile) !== 'N') ? '查看文件【'+ scope.row.JHYSJDFile?.length +'】': '未上传'}}
                </el-link>
              </template>
              <template #default>
                <div
                    class="demo-rich-conent"
                    style="display: flex; gap: 16px; flex-direction: column"
                >
                  <transition-group class="upload-file-list el-upload-list el-upload-list--text" name="el-fade-in-linear" tag="ul">
                    <li :key="file.Id" class="el-upload-list__item ele-upload-list__item-content" v-for="(file, index) in scope.row.JHYSJDFile">
                      <el-link :href="`${file.FileAdd}`" :underline="false" target="_blank">
                        <span class="el-icon-document"> {{ file.FileName +'【' + (file.FileAdd ? '已上传' : '未上传') + '】'}}</span>
                        <span style="margin-left: 8px;color: red">{{parseTime(file.CreateDate)}}</span>
                      </el-link>
                    </li>
                  </transition-group>
                </div>
              </template>
            </el-popover>
          </template>
        </el-table-column>


        <el-table-column prop="JSJDFile" label="结算资料" width="100">
          <template #header>
            <span :style="{color: hasCheck('结算') ? 'red' : 'inherit'}">结算资料文件</span>
          </template>
          <template #default="scope">
            <el-popover :width="600">
              <template #reference>
                <el-link type="primary">
                  {{(scope.row.JSJDFile?.length && getFileStatus(scope.row.JSJDFile) !== 'N')? '查看文件【'+ scope.row.JSJDFile?.length +'】': '未上传'}}
                </el-link>
              </template>
              <template #default>
                <div
                    class="demo-rich-conent"
                    style="display: flex; gap: 16px; flex-direction: column"
                >
                  <transition-group class="upload-file-list el-upload-list el-upload-list--text" name="el-fade-in-linear" tag="ul">
                    <li :key="file.uid" class="el-upload-list__item ele-upload-list__item-content" v-for="(file, index) in scope.row.JSJDFile">
                      <el-link :href="`${file.FileAdd}`" :underline="false" target="_blank">
                        <span class="el-icon-document"> {{ file.FileName +'【' + (file.FileAdd ? '已上传' : '未上传') + '】'}}</span>
                        <span style="margin-left: 8px;color: red">{{parseTime(file.CreateDate)}}</span>
                      </el-link>
                    </li>
                  </transition-group>
                </div>
              </template>
            </el-popover>
          </template>
        </el-table-column>





        <el-table-column prop="RowState" label="状态" width="90" fixed="right">
          <template #default="scope">
            {{ scope.row.RowState === '1' ? '正常' : '关闭' }}
          </template>
        </el-table-column>
        <el-table-column prop="YRowState" label="原状态" width="90">
          <template #default="scope">
            {{ scope.row.YRowState === '1' ? '正常' : scope.row.YRowState === '0' ? '关闭' :'' }}
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!-- 合同条款 -->
    <div class="contract-terms">
      <h3>二、合同金额</h3>
      <p>合同总金额：{{ addSeparator(baseInfo.ContractAmount) }}元</p>

      <h3>三、支付方式</h3>
      <div v-for="(item, index) in tremZF" :key="index">
        <div v-html="item.TermContent"></div>
      </div>

      <h3>四、交付条款</h3>
      <div v-for="(item, index) in tremJF" :key="index">
        <div v-html="item.TermContent"></div>
      </div>

      <h3>五、质量保证条款</h3>
      <div v-for="(item, index) in tremQA" :key="index">
        <div v-html="item.TermContent"></div>
      </div>

      <h3>六、验收条款</h3>
      <div v-for="(item, index) in tremYS" :key="index">
        <div v-html="item.TermContent"></div>
      </div>

      <h3>七、违约条款</h3>
      <div v-for="(item, index) in tremD" :key="index">
        <div v-html="item.TermContent"></div>
      </div>

      <h3>八、其他条款</h3>
      <div v-for="(item, index) in tremOther" :key="index">
        <div v-html="item.TermContent"></div>
      </div>

      <h3>合同附件</h3>
      <div v-for="(item, index) in ContractFile" :key="index">
        <el-link type="primary" class="htfjcls" :href="item.File1" target="_blank"><i class="el-icon-document"></i>{{item.FileName}}</el-link>
        <el-link type="primary"  class="htfjcls"  :href="item.File2" v-if="item.File2" target="_blank">{{item.FileName}}</el-link>
        <el-link type="primary" class="htfjcls"  :href="item.File3" v-if="item.File3" target="_blank">{{item.FileName}}</el-link>
      </div>

      <h3 v-if="ContractFileChecked">归档附件</h3>
      <div v-if="ContractFileChecked" v-for="(item, index) in ContractFileChecked" :key="index">
        <el-link type="primary" :href="item.File1" target="_blank">{{item.FileName}}</el-link>
      </div>

    </div>

    <!-- 签章区域 -->
<!--    <div class="contract-signatures">-->
<!--      <div class="signature-block">-->
<!--        <p>甲方（盖章）：</p>-->
<!--        <p>法定代表人或授权代表：</p>-->
<!--        <p>签订日期：{{ baseInfo.Ddate }}</p>-->
<!--      </div>-->
<!--      <div class="signature-block">-->
<!--        <p>乙方（盖章）：</p>-->
<!--        <p>法定代表人或授权代表：</p>-->
<!--        <p>签订日期：{{ baseInfo.Ddate }}</p>-->
<!--      </div>-->
<!--    </div>-->
  </div>
</template>

<script setup>
import {addSeparator, parseTime} from "@/utils/util";

defineOptions({ name: 'ContractWord' })

const props = defineProps({
  baseInfo: {
    type: Object,
    required: true
  },
  tremZF: {
    type: Array,
    default: () => []
  },
  tremJF: {
    type: Array,
    default: () => []
  },
  tremQA: {
    type: Array,
    default: () => []
  },
  tremYS: {
    type: Array,
    default: () => []
  },
  tremD: {
    type: Array,
    default: () => []
  },
  tremOther: {
    type: Array,
    default: () => []
  },
  subList: {
    type: Array,
    default: () => []
  },
  ContractFile: {
    type: Array,
    default: () => []
  },
  ContractFileChecked: {
    type: Array,
    default: () => []
  }
})

// 获取文件名称
function getFileStatus(files) {
  // 判断list中FileAdd是否都有值，全部有值返回完整，部分返回部分上传
  if (!Array.isArray(files) || files.length === 0) {
    return '无文件';
  }

  const allHaveValues = files.every(file => file.FileAdd !== undefined && file.FileAdd !== null && file.FileAdd !== '');
  const someHaveValues = files.some(file => file.FileAdd !== undefined && file.FileAdd !== null && file.FileAdd !== '');

  if (allHaveValues) {
    return 'Y';
  } else if (someHaveValues) {
    return 'B';
  } else {
    return 'N';
  }
}

function hasCheck(name){
  const phasedFile = props.baseInfo?.PhasedFile || [];

  if (phasedFile!==undefined && phasedFile.length>0){
    let b = phasedFile.some(item => item.includes(name));
    return b>0;

  }
  else
   return false;
}

</script>

<style lang="scss" scoped>
.contract-word {
  padding: 20px; // 减小内边距
  background: #fff;
  color: #333;
  line-height: 1.5; // 减小行高
  font-size: 12px; // 全局字体大小

  .contract-header {
    text-align: center;
    margin-bottom: 20px; // 减小底部间距

    .contract-title {
      font-size: 16px; // 缩小标题字体
      font-weight: bold;
      margin-bottom: 5px; // 减小间距
    }

    .contract-number {
      font-size: 12px; // 统一字体大小
      color: #666;
    }
  }
 .htfjcls
 {
  font-weight: 700;
  color: rgb(6, 51, 255);
  margin-left: 15px;
 }
  .contract-parties {
    margin-bottom: 20px; // 减小底部间距
    display: flex; // 使用flex横向排列
    gap: 15px; // 区块间距
    flex-wrap: wrap; // 自适应换行

    .party {
      flex: 1; // 平均分配宽度
      min-width: 280px; // 最小宽度
      margin-bottom: 10px; // 减小区块间距
      padding: 10px; // 内边距
      border: 1px solid #f0f0f0; // 边框分隔
      border-radius: 4px; // 圆角

      .party-title {
        font-weight: bold;
        margin-bottom: 5px; // 减小间距
        font-size: 13px; // 标题稍大
        color: #1890ff; // 标题蓝色
        padding-bottom: 5px;
        border-bottom: 1px solid #f0f0f0;
      }

      .party-content {
        margin-bottom: 5px; // 减小间距
        font-weight: bold;
      }

      .party-info {
        color: #666;
        line-height: 1.5; // 减小行高
        font-size: 12px; // 统一字体
      }
    }
  }

  // 关键信息样式
  .key-info {
    color: #1890ff; // 蓝色突出
    font-weight: bold;
  }

  .contract-subject,
  .contract-terms {
    margin-bottom: 20px; // 减小底部间距

    h3 {
      font-size: 14px; // 缩小标题字体
      font-weight: bold;
      margin: 10px 0 5px; // 减小间距
    }
  }

  // 表格样式优化
  .el-table {
    font-size: 12px; // 表格字体
  }

  .el-table-column {
    &[width] {
      width: auto !important; // 允许表格列自适应
    }
  }

  // 链接和按钮样式
  .el-link {
    font-size: 12px;
  }
}
</style>
